<template>
	<view class="page">
		<view class="set-form">
			<view class="form-item">
				<span class="title" @click="updateAvatar">头像</span>
				<img :src="user_pic" mode="" v-if="user_pic"/>
				<img src="../../static/logo.png" alt="static logo" mode="" v-else/>

				<span class="tail">></span>
			</view>
			<view class="form-item">
				<span class="title">名字</span>
				<input  type="text" v-model="nick_name" placeholder="请填写昵称(必填)" maxlength="8"/>
				
			</view>
			<view class="form-item">
				<span class="title">手机号</span>
				<input type="text" v-model="phoneNum"  maxlength="11"/>
				
			</view>
		</view>
		<view class="form2">
			<view class="form-item1">
				<span class="iconfont icon-wodedizhi"></span>
				<image class="address" src="../../static/images/address.png"></image>
				<span>我的地址</span>
				<span class="tail1">></span>
				<!-- <view class="iconfont icon-xiangyoujiantou"></view> -->
			</view>
			<view class="form-item1">
				<span class="iconfont icon-xiugaimima"></span>
				<image class="address" src="../../static/images/updatePwd.png"></image>
				<span>修改密码</span>
				<span class="tail1">></span>
			</view>
		</view>
		<input class="btn" type="button" @click="changeInfo" value="保存修改" />
	</view>
</template>

<script>
	import {updateUser} from "../../api/index.js"
	export default {
		data() {
			return {
				user_pic:'',
				nick_name:"",
				phoneNum:""
			}
		},
		created(){
			const user=uni.getStorageSync('userInfo')
			this.nickName=user.nick_name,
			this.phoneNum=user.phoneNum,
			this.user_pic=user.user_pic,
			this.userId=user.id
		},
		methods: {
			//保存修改
			changeInfo(){
				updateUser({id:this.userId,nick_name:this.nick_name,user_pic:this.user_pic,phoneNum:this.phoneNum})
				.then(res=>{
					if(res.data.status===0){
						//保存修改成功后提示修改成功
						uni.showToast({
							title:"修改成功"
						})
						let info=uni.getStorageSync("userInfo")
						//保存最新数据到本地
						let userInfo={...info,nick_name:this.nick_name,user_pic:this.user_pic,phoneNum:this.phoneNum}
						uni.setStorageSync("userInfo",userInfo)
					}
					console.log(res);
				})
			},
			//修改头像
			updateAvatar(){
				//选择图片
				uni.chooseMessageFile({
					count:1,
					type:"image",
					success:(res=>{
						console.log(res,"图片");
						//获取图片临时地址
						let imageUrl=res.tempFiles[0].path
						console.log(imageUrl);
						//上传图片临时地址到服务器
						uni.uploadFile({
							url:"http://8.140.198.52:8001/common/uploadFile",
							filePath:imageUrl,
							name:"file",
							header:{
								"Authorization":uni.getStorageSync("token"),
								'content-type':'mltipart/form-data',
							},
							success:(res)=>{
								console.log(res,"图片在服务器上的地址");
								this.user_pic=res.data
							}
						})
						
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page{
	background-color: #eeeeee;
	width: 100%;
	height: 100vh;
}
.set-form{
	background-color: #fff;
	margin-bottom:10px;
	.form-item,.form-item1{
		border-bottom: 2px solid #eeeeee;
		height:60px;
		// background-color: red;
		border-radius: 6px;
		display: flex;
		align-items: center; /* 垂直对齐 */
		// gap: 8px; /* 元素之间的间距 */
		.title {
			// display: flex;
			font-size: 14px;
			// font-weight: 500;
			// background-color: red;
			width:100px;
			height:20px;
			padding: 10px;
			letter-spacing: 2px;
		}
		img{
			// background-color: red;
			margin-left:40%;
			width: 30px;
			height: 30px;
			border-radius: 20px;
		}
		.tail{
			// background-color: red;
			padding-left: 10px;
		}
		input{
			font-size: 16px;
			border-radius: 4px;
			text-align: right;
		}
	
	}
	
}
.form2{
	.form-item1{
		height: 50px;
		margin-bottom:10px;
		border-radius: 6px;
		background-color: #fff;
		display: flex;
		align-items: center; /* 垂直对齐 */
		gap: 8px; /* 元素之间的间距 */
	}
	
	span{
		padding-left: 5px;
	}
	.address{
		width:15px;
		height:15px;
	}
	.tail1{
		// background-color: red;
		padding-left: 55%;
	}
}
.btn{
	background-color: #FF88C2;
	margin: 50px auto;
	text-align: center;
	width:80%;
	height: 90rpx;
	border-radius: 40px;
	color:#fff;
}
</style>

